<template>
  <div>
    <van-nav-bar title="意见反馈" left-arrow @click-left="onClickLeft" />


    <van-tabs v-model:active="activeName">
      <van-tab title="功能异常" name="a"></van-tab>
      <van-tab title="优化建议" name="b"></van-tab>
      <van-tab title="其他反馈" name="c"></van-tab>
    </van-tabs>

    <div class="ban">
      <van-cell-group inset>
        <van-field v-model="message" rows="4" autosize type="textarea" maxlength="50" placeholder="请输入您想反馈的内容..."
          show-word-limit />
      </van-cell-group>
    </div>
    <div class="title">
      <span>添加图片</span> (选填, 最多4张)

    </div>

    <div style="display: flex; align-items: center;">

      <template v-for="(item, int) in state" :key="int">
        <p v-if="state !== null"
          style="width: 100px;height: 68px;border: 1px dashed #ccc;margin: 0 5px;line-height: 50px;text-align: center;font-size: 16px;">
          {{ item }}
        </p>
      </template>
      < img style="width: 100px;height: 80px; margin-left: 15px;" src="../../assets/fu2.png" alt=""
        @click="show = true">
    </div>


    <div class="btn">
      <div class="but">
        提交
        <!-- <van-button type="primary"  block>提交</van-button> -->
      </div>

    </div>



  </div>
</template>

  <script setup lang="ts">
  import { ref } from 'vue';

import { useRouter } from 'vue-router';
const router=useRouter()
const state = ref(null); // 定义state变量
const show = ref(false);
const message = ref('');
const onClickLeft=()=>{
    router.back()
  }
  const activeName = ref('a');
</script>


  <style lang="scss" scoped>
  .ban {
    height: 270px;
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
  }

  .tu {
    width: 150px;
    height: 150px;
    border: solid 1px #ccc;
  }

  .up {
    margin-top: 20px;
  }

  .btn {
    width: 100%;
    height: 50px;
    background: #ccc;
  }
</style>